<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
		<script src="../components/jquery-ui/jquery-1.2.6.js" type="text/javascript"></script>        
        <script src="../components/newChart/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../components/newChart/amcharts/serial.js" type="text/javascript"></script>


        <script>
           
        $(function(){
        	$.ajax({
        		type:'get',
        		dataType:'json',
        		url:'statChartAction_getproductsale',
        		success:function(data){
        			var chart;
                    var chartData = data;

                        // SERIAL CHART
                        var chart = new AmCharts.AmSerialChart();
                        chart.dataProvider = chartData;
                        chart.categoryField = "product_no";
                        chart.rotate = true;
                        chart.color = "#FFFFFF";
                        chart.handDrawn = true;
                        chart.handDrawScatter = 4;

                        // this line makes the chart to show image in the background
                        chart.backgroundImage = "images/bg.jpg";

                        // sometimes we need to set margins manually
                        // autoMargins should be set to false in order chart to use custom margin values
                        chart.autoMargins = false;
                        chart.marginTop = 100;
                        chart.marginLeft = 50;
                        chart.marginRight = 30;
                        chart.startDuration = 2;

                        // AXES
                        // category
                        var categoryAxis = chart.categoryAxis;
                        categoryAxis.gridAlpha = 0;
                        categoryAxis.axisAlpha = 0;
                        categoryAxis.labelsEnabled = false;

                        // value
                        var valueAxis = new AmCharts.ValueAxis();
                        valueAxis.gridAlpha = 0;
                        valueAxis.axisAlpha = 0;
                        valueAxis.labelsEnabled = false;
                        valueAxis.minimum = 0;
                        chart.addValueAxis(valueAxis);

                        // GRAPH
                        var graph = new AmCharts.AmGraph();
                        graph.balloonText = "[[category]]: [[value]]";
                        graph.valueField = "totalamount";
                        graph.type = "column";
                        graph.lineAlpha = 0;
                        graph.fillAlphas = 0.5;
                        // you can pass any number of colors in array to create more fancy gradients
                        graph.fillColors = ["#000000", "#FF6600"];
                        graph.gradientOrientation = "horizontal";
                        graph.labelPosition = "inside";
                        graph.labelText = " [[value]] ";
                        /* graph.balloonText = "[[category]]: [[value]] totalamount"; */
                        chart.addGraph(graph);

                        // LABEL
                        chart.addLabel(50, 40, "产品销售情况图", "left", 15, "#000000", 0, 1, true);

                        chart.creditsPosition = "bottom-right";

                        // WRITE
                        chart.write("chartdiv");
        		}
        	});
        })
        
        
        
        
        
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width:800px; height: 400px;"></div>
    </body>

</html>